using grid to create shapes

revision:


Size: [7vw]
Ratio: [1]
Spacing: [0.25vw]
Clip-path
hc: [0.25]
vc: [0.15]
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
holiday"
code:
        <div class="panel">
            <div>Size: [<span>7vw</span>] <input type="range" min="1" max="20" step="1" value="7" name="s"></div>
            <div>Ratio: [<span>1</span>] <input type="range" min="0" max="2" step="0.05" value="1" name="r"></div>
            <div>Spacing: [<span>0.25vw</span>]<input type="range" min="0" max="2" step="0.1" value="1" name="mv"></div>
            <div>Clip-path<br>
                hc: [<span>0.25</span>]<input type="range" min="0" max=".5" step=".05" value=".25" name="h"><br>
                vc: [<span>0.15</span>]<input type="range" min="0" max=".5" step=".05" value=".15" name="v">
            </div>
        </div>
        <div class="main">
            <div class="container">
                <div><img src="../images/1.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/2.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/3.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/4.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/5.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/1a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/2a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/3a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/4a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/5a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/1S.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/2S.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/3aa.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/3s.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/4a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/4s.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/5a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/6.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/7.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/8.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/9.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/6a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/7a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/8a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/9a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/10.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/10a.jpg" alt=holiday" width="100%" height="100%"/></div>
                <div><img src="../images/11.jpg" alt=holiday" width="100%" height="100%"/></div>
            </div>
        </div>
        <style>
            .main {display: grid; grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh))); justify-content:center; --s: 10vw; --r: 1.5; --h: 0.25; --v: 0.35; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; 
                --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); --mv: 0.25vw; --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px);}
            .container {grid-column: 1/-1; font-size: 0;}
            .container div { width: var(--s); margin: var(--mv) var(--mh); height: calc(var(--s)*var(--r)); display: inline-block; font-size:initial;clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),100% calc(100% - 
                var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc));background: red; margin-bottom: calc(var(--mv) - var(--vc)); }
            .container div:nth-child(odd) { background:green}
            .container::before{content: ""; width: calc(var(--s)/2 + var(--mh)); float: left; height: 200%; shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 2px), #000  0 var(--f));}
            .panel {position: relative;width: 20vw;top: 2vw; left: 2vw;padding: 1vw;border: 0.1vw solid;border-radius: 1vw;background-color: skyblue; font-family: Helvetica, sans-serif;opacity: .5; margin-bottom: 2vw;}
            .panel:hover {opacity:1}
            .panel > div:not(:last-child) {border-bottom: 0.1vw solid;padding-bottom: 1vw;margin-bottom: 1vw;}
            *,*::before {transition:0.5s linear;}
            img:hover{scale: 2;}
        </style>
        <script>
            let inputs = document.querySelectorAll('input[type=range]')
            let elem = document.querySelector('.main')
            inputs.forEach(input => {
                input.addEventListener('change', function(e) {
                    var p = e.target.getAttribute('name');
                    if(p=="s" || p=="mv") {
                        elem.style.setProperty("--"+p, this.value+"vw");
                        e.target.previousElementSibling.innerHTML = this.value+"vw";
                    } else { 
                        elem.style.setProperty("--"+p, this.value);
                        e.target.previousElementSibling.innerHTML = this.value;
                    }
                });
            });
        </script>